<template>
  <SynonymFormPage mode="edit" :initial="initial" @submit="handleSubmit" />
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import SynonymFormPage, { type SynonymPayload } from './SynonymFormPage.vue'

const route = useRoute()

const initial = computed(() => {
  const id = (route.query.id as string | undefined) ?? undefined
  const raw = route.query.row
  let base: any = {}
  if (raw) {
    const s = Array.isArray(raw) ? raw[0] : raw
    try { base = JSON.parse(decodeURIComponent(s || '{}')) } catch { }
  }
  if (!id && !base.id && !base.words && !base.name && !base.querys) return null
  return {
    id: id ?? base.id,
    words: String(base.words ?? base.name ?? base.querys ?? '').replace(/｜/g, '|'),
    enabled: base.enabled ?? (base.status ? (base.status === 'published' || base.status === 'enabled') : undefined),
  }
})

async function handleSubmit(payload: SynonymPayload) {
  console.log('edit payload:', payload)
}
</script>
